<template>
  <!-- 外层容器：控制整体间距与背景 -->
  <up-row justify="space-between" gutter="20" class="menu-container">
    <!-- 左侧：subsection 选项卡 -->
    <up-col span="10">
      <up-subsection 
        :list="list" 
        mode="button" 
        :current="current" 
        bgColor="#f5f9f5" 
        fontSize="16px" 
        bold="true"
        activeColor="#303133"
        @change="handleSubsectionChange"    
      ></up-subsection>
    </up-col>

    <!-- 右侧：picker + 按钮 -->
    <up-col span="2" class="right-col">
      <up-picker
        v-model="uPickerRef"
        :show="show" 
        :columns="columns"
        :keyName="'label'" 
        @cancel="show = false"
        closeOnClickOverlay 
        @close="show = false"
        @confirm="handleConfirm"
      ></up-picker>
      <up-button @click="show = true">{{ text }}</up-button>
    </up-col>
  </up-row>
</template>
<script setup lang="ts">
	import { reactive ,ref,defineEmits, computed } from 'vue';

	const list = ref(["接单大厅", "我的接单", "我的发布"]);
	// 当前选中的subsection索引（0：接单大厅，1：我的接单，2：我的发布）
	const current = ref(0);
	
	// 定义7个选项（用于接单大厅/我的发布）
	const sevenOptions = [
	  { label: '全部', value: 10 },
	  { label: '待接单', value: 0 },
	  { label: '已接单', value: 1 },
	  { label: '已完成', value: 2 },
	  { label: '已结算', value: 3 },
	  { label: '已取消', value: 4 },	
	  { label: '已过期', value: 5 },
	];
	// 定义4个选项（用于我的接单）
	const fourOptions = [
	  { label: '全部', value: 10},
	  { label: '已接单', value: 1 },
	  { label: '已完成', value: 2 },
	  { label: '已结算', value: 3 },
	  { label: '已取消', value: 4 },
	];
	// 动态切换的columns（初始默认7个选项，对应接单大厅）
	const columns = ref([sevenOptions]);
	console.log("columns",columns)
	// picker当前选中的值
	const uPickerRef = ref(sevenOptions[0].value);
	const text = ref(sevenOptions[0].label)
	// 控制picker显示/隐藏
	const show = ref(false);
	// 这里定义一个名为 'column-select' 的事件，用于传递选中的状态
	const emit = defineEmits(['column-select']);
	const menuData =reactive({
		index:0,
		selectedValue:10
	})
	// 监听subsection切换事件
	const handleSubsectionChange = (index: number) => {
	  current.value = index; // 更新当前选中索引
	  menuData.index = index
	  emit('column-select',menuData); 
	  // 根据索引切换columns
	  if (index === 0 ) {
	    // 接单大厅（0）或我的发布（2）：显示7个选项
	    columns.value = [sevenOptions];
	  } else if(index === 2){
		columns.value = [sevenOptions];
	  }else { 
	    // 我的接单（1）：显示4个选项
	    columns.value = [fourOptions];
	  }
	  // 重置picker选中值为新数组的第一个选项
	  uPickerRef.value = columns.value[0][0].value;
	  text.value = columns.value[0][0].label;
	  // 切换时关闭picker（避免显示旧选项）
	  show.value = false;
	};
	// 确认选择时更新picker显示值
	const handleConfirm = (e:any) => {
		
	  menuData.selectedValue = e.value[0].value; // 获取选中的值（通常是数组，如 ['选项7']）
	  text.value = e.value[0].label;
	  show.value = false;
	  // 触发自定义事件，将选中值传递给父组件
	  emit('column-select', menuData); 
	};
</script>

<style lang="scss">
// 外层容器：控制整体内边距与背景
.menu-container {
  padding: 20rpx;
  background-color: #f5f9f5; // 与页面背景一致
}

// ---------- 左侧 Subsection 选项卡 ----------
.up-subsection {
  // 单个选项卡样式
  .up-subsection-item {
    padding: 12rpx 24rpx;    // 增大点击区域
    border-radius: 10rpx;   // 圆角更柔和
    margin: 0 6rpx;         // 选项间间距
    transition: all 0.3s;   // 过渡动画（hover/选中）

    // 未选中状态
    &:not(.up-subsection-item-active) {
      color: #999; // 文字浅灰色
      background-color: transparent;
    }

    // 选中状态
    &.up-subsection-item-active {
      background-color: #fff;  // 白色背景
      color: #333;             // 文字深灰色
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); // 轻微阴影增强层级
    }
  }
}

// ---------- 右侧 按钮 + Picker ----------
.right-col {
  display: flex;
  align-items: center;
  justify-content: flex-end; // 按钮右对齐
}

// 右侧按钮样式
.up-button {
  background-color: #f0f0f0; // 浅灰背景
  color: #666;               // 文字深灰色
  border-radius: 10rpx;      // 圆角
  padding: 8rpx 16rpx;       // 内边距
  font-size: 24rpx;          // 字号
  &:hover {
    opacity: 0.8; // hover 透明度降低（交互反馈）
    transition: opacity 0.3s;
  }
}

// ---------- Picker 弹出层样式 ----------
// 选项行高与字体
.up-picker-column {
  .up-picker-item {
    height: 80rpx;    // 增大选项高度（易点击）
    line-height: 80rpx; // 垂直居中
    font-size: 28rpx;   // 字号
    color: #333;        // 文字深灰色
  }

  // 选中项样式
  .up-picker-item-selected {
    background-color: #f5f9f5; // 与页面背景一致
    color: #4CD964;            // 主题色（绿色，呼应“去看看”按钮）
  }
}

// 确认/取消按钮
.up-picker-action {
  .up-picker-confirm,
  .up-picker-cancel {
    font-size: 28rpx; // 字号
    font-weight: 500; // 字重
  }
  .up-picker-confirm {
    color: #4CD964; // 确认按钮用主题色
  }
  .up-picker-cancel {
    color: #999;    // 取消按钮浅灰色
  }
}
</style>